<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>按钮</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.bootcss.com/zui/1.7.0/css/zui.min.css" rel="stylesheet">
</head>

<body>
    <div id="page" class="">
        <section class="">
            <header>
                <h3>按钮的大小</h3>
            </header>
            <article>
                <div class="table-responsive">
                    <table class="table">
                        <tbody>
                            <tr>
                                <th class="col-md-4">实例</th>
                            </tr>
                            <tr>
                                <td>
                                    <button class="btn btn-lg btn-primary" type="button">大尺寸按钮</button>
                                    <button class="btn btn-lg" type="button">大尺寸按钮</button>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <button class="btn btn-primary" type="button">默认大小</button>
                                    <button class="btn btn-default" type="button">默认大小</button>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <button class="btn btn-sm btn-primary" type="button">较小的按钮</button>
                                    <button class="btn btn-sm" type="button">较小的按钮</button>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <button class="btn btn-mini btn-primary" type="button">迷你按钮</button>
                                    <button class="btn btn-mini" type="button">迷你按钮</button>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <button class="btn btn-large btn-block btn-primary" type="button">块状按钮</button>
                                    <button class="btn btn-large btn-block btn-default" type="button">块状按钮</button>
                                </td>

                            </tr>
                        </tbody>
                    </table>
                </div>
            </article>
        </section>
        <section>
            <header>
                <h3>按钮的不同状态</h3>
            </header>
            <article>
                <div class="table-responsive">
                    <table class="table">
                        <tbody>
                            <tr>
                                <th class="col-md-4">实例</th>
                            </tr>
                            <tr>
                                <td>
                                    <button class="btn btn-default">
                                        <i class="icon icon-star"></i> 带图标的按钮</button>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <button type="button" class="btn btn-primary active" data-toggle="button">状态切换按钮</button>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <div class="btn-group" data-toggle="buttons">
                                        <label class="btn active">
                                            <input type="checkbox" checked=""> 多选1
                                        </label>
                                        <label class="btn">
                                            <input type="checkbox"> 多选2
                                        </label>
                                        <label class="btn">
                                            <input type="checkbox"> 多选3
                                        </label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="btn-group" data-toggle="buttons">
                                        <label class="btn btn-primary">
                                            <input type="radio" name="options" id="option1" checked=""> 单选1
                                        </label>
                                        <label class="btn btn-primary active">
                                            <input type="radio" name="options" id="option2"> 单选2
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="options" id="option3"> 单选3
                                        </label>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </article>
        </section>

        <script>
            function afterPageLoad() {
                $('#loadingBtnExample').on('click', function () {
                    var $btn = $(this);
                    $btn.button('loading');

                    // 此处使用 setTimeout 来模拟你的复杂功能逻辑
                    setTimeout(function () {
                        $btn.button('reset');
                    }, 2000);
                });
            }
        </script>
        <section class="">
            <header>
                <h3>按钮的颜色</h3>
            </header>
            <article>
                <div class="table-responsive">
                    <table class="table">
                        <tbody>
                            <tr>
                                <th class="col-md-4">实例</th>
                            </tr>
                            <tr>
                                <td>
                                    <button type="button" class="btn">默认</button>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <button type="button" class="btn btn-primary">主要</button>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <button type="button" class="btn btn-info">信息</button>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <button type="button" class="btn btn-success">成功</button>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <button type="button" class="btn btn-warning">警告</button>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <button type="button" class="btn btn-danger">危险</button>
                                </td>

                            </tr>
                        </tbody>
                    </table>
                </div>
            </article>
        </section>
    </div>
    <div id="page" class="">

        <div id="pageBody" class="scrollbar-hover">

            <div class="container">
                <div id="pageContent">
                    <section>
                        <header>
                            <h3>类型</h3>
                        </header>
                        <article>
                            <h4>一组按钮</h4>
                            <div class="example">
                                <div class="btn-group">
                                    <button type="button" class="btn">左</button>
                                    <button type="button" class="btn">中</button>
                                    <button type="button" class="btn">右</button>
                                </div>
                            </div>
                            <h4>多组按钮</h4>
                            <div class="example">
                                <div class="btn-toolbar" style="margin: 0;">
                                    <div class="btn-group">
                                        <button class="btn">复制</button>
                                        <button class="btn">剪切</button>
                                        <button class="btn">粘贴</button>
                                        <button class="btn">删除</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn">
                                            <i class="icon icon-picture"></i>
                                        </button>
                                        <button class="btn">
                                            <i class="icon icon-file-movie"></i>
                                        </button>
                                        <button class="btn">
                                            <i class="icon icon-file-text-o"></i>
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn">
                                            <i class="icon icon-code"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <h4>垂直按钮组</h4>
                            <div class="example">
                                <div class="btn-group btn-group-vertical">
                                    <button type="button" class="btn">上面</button>
                                    <button type="button" class="btn">中间</button>
                                    <button type="button" class="btn">下面</button>
                                </div>
                            </div>
                        </article>
                    </section>


                    <section>
                        <header>
                            <h3>变化</h3>
                        </header>
                        <article>
                            <h4>基本下拉按钮组</h4>
                            <div class="example">
                                <div class="btn-group">
                                    <button type="button" class="btn">春天</button>
                                    <button type="button" class="btn">夏天</button>
                                    <div class="btn-group">
                                        <button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-toggle="dropdown">未来
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
                                            <li>
                                                <a href="#">秋天</a>
                                            </li>
                                            <li>
                                                <a href="#">冬天</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <h4>分裂式下拉按钮组</h4>
                            <p>基本按钮组的变形，将第二个按钮改成图标即可。</p>
                            <div class="example">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-danger">操作</button>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                            <span class="sr-only">操作</span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li>
                                                <a href="#">编辑</a>
                                            </li>
                                            <li>
                                                <a href="#">删除</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="#">撤销</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <h4>上拉按钮组</h4>
                            <p>通过div.dropup实现</p>
                            <div class="example">
                                <div class="btn-group dropup">
                                    <button type="button" class="btn btn-danger">操作</button>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                            <span class="sr-only">操作</span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li>
                                                <a href="#">编辑</a>
                                            </li>
                                            <li>
                                                <a href="#">删除</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="#">撤销</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <h4>大小</h4>
                            <p>通过
                                <code>.btn-lg</code>、
                                <code>.btn-sm</code>、
                                <code>.btn-xs</code> 实现。</p>
                            <div class="example">
                                <div class="btn-toolbar" style="margin: 0;">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-lg">左</button>
                                        <button type="button" class="btn btn-lg">中</button>
                                        <button type="button" class="btn btn-lg">右</button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn">左</button>
                                        <button type="button" class="btn">中</button>
                                        <button type="button" class="btn">右</button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm">左</button>
                                        <button type="button" class="btn btn-sm">中</button>
                                        <button type="button" class="btn btn-sm">右</button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs">左</button>
                                        <button type="button" class="btn btn-xs">中</button>
                                        <button type="button" class="btn btn-xs">右</button>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </section>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zui/1.7.0/js/zui.min.js"></script>
</body>

</html>